<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      基于 计算属性，实现前端搜索

     -->
    <div id="app">
      <input type="text" placeholder="请输入搜索关键字" v-model="keyword" />

      <ul>
        <li v-for="item in result">{{ item }}</li>
      </ul>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            keyword: "", // 搜索关键字
            list: ["Apple", "Banana", "Orange", "西瓜", "菠萝"], // 原始数据
          };
        },

        computed: {
          // 搜索结果
          result() {
            if (!this.keyword) {
              return this.list
            }
            // return this.list.filter((item) => item === this.keyword);
            return this.list.filter((item) => item.includes(this.keyword));
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
